<!DOCTYPE html>
<html lang="zh-Hans-CN">
<head>
  <meta charset="UTF-8">
  <title>立方体</title>
</head>
<body onload="init()">
<script src="three.min.js"></script>
<script>
  /* 参数
   -----------------------------------------------------------------

   - 立方体 -
   THREE.CubeGeometry(width, height, depth, widthSegments, heightSegments, depthSegments)
     width 是x方向上的长度
     height 是y方向上的长度
     depth 是z方向上的长度
     后三个参数分别是在三个方向上的分段数 如widthSegments为3的话，代表x方向上水平分为三份

   - 平面 -
   THREE.PlaneGeometry(width, height, widthSegments, heightSegments)

   - 球体 -
   THREE.SphereGeometry(radius, segmentsWidth, segmentsHeight, phiStart, phiLength, thetaStart, thetaLength)
     radius 是半径
     segmentsWidth 表示经度上的切片数
     segmentsHeight 表示纬度上的切片
     phiStart 表示经度开始的弧度
     phiLength 表示经度跨过的弧度
     thetaStart 表示纬度开始的弧度
     thetaLength 表示纬度跨过的弧度

   - 圆形 -
   THREE.CircleGeometry(radius, segments, thetaStart, thetaLength)

   - 圆柱 -
   THREE.CylinderGeometry(radiusTop, radiusBottom, height, radiusSegments, heightSegments, openEnded)
     adiusTop 与 radiusBottom 分别是顶面和底面的半径
     height 是圆柱体的高度
     radiusSegments 与 heightSegments可类比球体中的分段
     openEnded 是一个布尔值，表示是否没有顶面和底面，缺省值为 false 表示有顶面和底面

   - 正四面体、正八面体、正二十面体 -
   THREE.TetrahedronGeometry(radius, detail)
   THREE.OctahedronGeometry(radius, detail)
   THREE.IcosahedronGeometry(radius, detail)
     radius 是半径
     detail 是细节层次（Level of Detail）的层数

   - 圆环面 -
   THREE.TorusGeometry(radius, tube, radialSegments, tubularSegments, arc)
     radius 是圆环半径
     tube 是管道半径
     arc 是圆环面的弧度，缺省值为 Math.PI * 2

   - 圆环结 -
   THREE.TorusKnotGeometry(radius, tube, radialSegments, tubularSegments, p, q, heightScale)
     p 和 q 是控制其样式的参数，一般可以缺省
     环面纽结的交叉数： c = min((p−1)q, (q−1)p).
     weiki 环面纽结 纽结理论

   -----------------------------------------------------------------
   */

  function init() {
    let renderer = new THREE.WebGLRenderer();
    renderer.setSize(400, 300);
    document.body.appendChild(renderer.domElement);
    renderer.setClearColor(0x000000)

    let scene = new THREE.Scene();

    let camera = new THREE.PerspectiveCamera(40, 400 / 300, 1, 10)
    camera.position.set(1, 2, 5);
    camera.lookAt(new THREE.Vector3(0, 0, 0));
    scene.add(camera);

    let cube = new THREE.Mesh(
//        new THREE.CubeGeometry(1, 2, 3, 2, 2, 3),
//        new THREE.PlaneGeometry(2, 4),
//        new THREE.SphereGeometry(1, 8, 6, 0, Math.PI * 2, Math.PI / 6, Math.PI / 3),
//        new THREE.CircleGeometry(2, 18, Math.PI / 3, Math.PI / 3 * 4),
//        new THREE.CylinderGeometry(1, 1, 2, 12, 3),
//        new THREE.CylinderGeometry(1, 2, 2, 18, 3, true),
//        new THREE.TetrahedronGeometry(3),
//        new THREE.OctahedronGeometry(2),
//        new THREE.IcosahedronGeometry(1),
//        new THREE.TorusGeometry(1, .3, 8, 18, Math.PI / 3 * 2),
        new THREE.TorusKnotGeometry(1, 0.3, 32, 8, 2, 5),
        new THREE.MeshBasicMaterial({
          color: 0xff0000,
          wireframe: true
        })
    );
    scene.add(cube);

    renderer.render(scene, camera);
  }
</script>
</body>
</html>